<template>
  <rx-dialog @handOk="okFun" @cancel="cancel">
    <div v-if="mdl.status=='Draft'" slot="toolbar">
      <a-button type="primary" @click="saveNews">{{$ti18('rxList.deploy','发布')}}</a-button>
    </div>
    <rx-layout>
      <div slot="center">
        <a-spin :tip="$ti18('processing','正在处理...')" :spinning="isSpinning">
        <div>
          <a-form :form="form">
            <div class="title-div">
                {{i18n('stepOne','第一步：选择压缩文件')}}
            </div>
            <a-row>
              <a-col :span="24">
                <a-upload
                  accept=""
                  :multiple="true"
                  :file-list="fileList"
                  :before-upload="beforeFileUpload"
                  :remove="removeFile"
                >
                  <a-button>
                    <a-icon type="upload"/>
                    Upload
                  </a-button>
                </a-upload>
              </a-col>
            </a-row>
            <div class="title-div" v-if="showImportBtn">
                {{i18n('stepTwo','第二步：导入')}}
            </div>
            <a-row v-if="showImportBtn">
              <a-col :span="24">
                <a-button type="primary" @click="handleUpload()">
                    {{$ti18('rxList.importBtn','导入')}}
                </a-button>
              </a-col>
            </a-row>
            <div class="title-div" v-if="showSqls">
                {{i18n('stepThree','第三步：手动执行SQL语句')}}
            </div>
            <a-row v-if="showSqls">
              <a-col :span="24">
                <div style="height: 200px;box-sizing: border-box;width: 100%;padding-right: 1px">
                  <rx-monaco-editor
                    ref="monacoes"
                    :language="monacoeLanguage"
                    v-model="updataSqls"
                  >
                  </rx-monaco-editor>
                </div>
              </a-col>
            </a-row>
          </a-form>
        </div>
        </a-spin>
      </div>
    </rx-layout>

  </rx-dialog>
</template>
<script>
  import FormSolutionApi from '@/api/form/core/formSolution'
  import {BaseForm, RxDialog, RxLayout,Util,RxMonacoEditor} from "@lowcode/jpaas-common-lib";
  import ACol from "ant-design-vue/es/grid/Col";

  export default {
    name: 'form-solution-import',
    mixins: [BaseForm],
    components: {
      ACol,
      RxDialog,
      RxMonacoEditor
    },
    props: {
      layerid: String,
      lydata: Object,
      destroy: Function,
      treeId: {
        type: String
      },
      callback:{
        type:Function
      }
    },
    data() {
      return {
        monacoeLanguage:"html",
        isSpinning:false,
        showImportBtn:false,
        showSqls:false,
        updataSqls:"",
        fileList: [],
        file: {},
        fileZipTypes:["application/x-zip-compressed","application/zip"]
      }
    },
    methods: {
        i18n(name, text, key) {
            return this.$ti18(name, text, "formBoListDialog", key);
        },
      removeFile(info) {
        this.fileList.splice(0, 1);
        this.file = {};
      },
      beforeFileUpload(file) {
        if (!file || !file.type || this.fileZipTypes.indexOf(file.type)==-1) {
          let message=this.i18n('selectFile','请选择需要正确的压缩文件（zip格式）！');
          this.$message.warn(message);
          return;
        }
        this.showImportBtn=true;
        this.file = file;
        this.fileList.push({
          uid: file.uid,
          name: file.name,
          status: 'done',
          url: null
        });
        return false;
      },
      async uploadFile(formData, type) {
        let self = this;
        this.isSpinning=true;
        await this.callback(formData);
      },
      getUpdataSqls(data){
        var sqls =[];
        for(var i=0;data&&i<data.length;i++){
          var sqlObj=data[i];
          sqls.push(sqlObj.sql);
        }
        if(sqls.length>0){
          this.showSqls=true;
          this.updataSqls = sqls.join("\n");
        }
        this.okFun();
      },
      handleUpload() {
        if (this.fileList.length === 0) {
          let content= this.i18n('selectImport','请选择需要导入的压缩文件（zip格式）！');
          this.$message.warn(content);
          return;
        }
        const {
          fileList
        } = this;
        const formData = new FormData();
        let timestamp = new Date().getTime();
        formData.append('zipFile', this.file);
        formData.append('treeId', Util.encryptWord(this.treeId,true));
        if(this.curApp.appId){
            formData.append('appId', Util.encryptWord(this.curApp.appId,true));
        }
        this.uploadFile(formData);
        this.okFun();
      },
      okFun() {
        Util.closeWindow(this, "ok");
      },
      cancel() {
        Util.closeWindow(this, "cancel");
      }
    }
  }
</script>
<style scoped>
  .title-div {
    padding: 10px 0;
  }

  * >>> .ql-snow .ql-picker-label::before {
    vertical-align: top;
  }

  * >>> .ql-snow .ql-color-picker .ql-picker-label svg,
  * >>> .ql-snow .ql-icon-picker .ql-picker-label svg {
    vertical-align: top;
  }

  .avatar-uploader > .ant-upload {
    width: 128px;
    height: 128px;
  }

  .ant-upload-select-picture-card i {
    font-size: 32px;
    color: #999;
  }

  .ant-upload-select-picture-card .ant-upload-text {
    margin-top: 8px;
    color: #666;
  }
</style>